import { useState, useEffect, useRef } from 'react';
import { TouchableHighlight, Modal, StyleSheet, TouchableOpacity, Text, ToastAndroid, View, Image, ImageBackground, ScrollView, Dimensions, Animated, PanResponder } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
import axios from '../../api/axios'
import { useAuth, baseURL } from '../../context/AuthProvider';

const Evaluation = ({ navigation }) => {
    const [commentlist, setCommentlist] = useState([])
    const commodityid = navigation.getState().routes[navigation.getState().index].params.commodityid
    // console.log(commodityid);
    const { user } = useAuth()
    // 用户删除自己评论
    const deleteComment = (id) => {
        axios.post('/goodscomment/delete', {
            comment_id: id
        }).then(res => {
            console.log(res);
            if (res.code == 200) {
                axios.post('/goodscomment/getcomment', { commodityid: commodityid }).then(res => {
                    setCommentlist(res.data)
                    ToastAndroid.show("删除评论成功", 2000);
                }).catch(err => {
                    console.log(err);
                })
            }
        })
    }
    useEffect(() => {
        axios.post('/goodscomment/getcomment', { commodityid: commodityid }).then(res => {
            // console.log(res);
            // console.log(res.data[0].commentimgs);
            // console.log(res.data[0].avatar);
            console.log(555);
            console.log(res.data);
            setCommentlist(res.data)
        }).catch(err => {
            console.log(err);
        })
    }, [])
    return (
        <ScrollView style={{ width: '100%' }}>
            {
                commentlist ?
                    commentlist.map(item => {
                        return <View style={{ width: '95%', padding: 10 }}>
                            <View style={{ width: '100%', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                                <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                                    <Image style={{ width: 50, height: 50, borderRadius: 50, marginRight: 16 }}
                                        source={item.avatar[0].avatar ? { uri: baseURL + item.avatar[0].avatar } : require('../../../images/mine/avatar.jpg')}></Image>
                                    <Text style={{ fontSize: 15 }}>{item.nickname}</Text>
                                </View>
                                <View>
                                    <MaterialCommunityIcons name="delete-empty-outline" size={25} color="#2A5F6b"
                                        style={item.userid == user.userid ? {} : { display: 'none' }}
                                        onPress={() => { deleteComment(item.comment_id) }} />
                                </View>
                            </View>
                            <View style={{ width: '95%', marginTop: 10, marginLeft: '5%', backgroundColor: '#fff', padding: '4%', borderRadius: 10, }}>
                                <Text>{item.comment_text}</Text>
                                {
                                    item.commentimgs[0] ?
                                        <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: '100%', marginTop: 10 }}>
                                            {item.commentimgs.map(item => {
                                                return <View style={{ margin: 5 }}>
                                                    <Image style={{ width: 110, height: 110, borderWidth: 1, borderColor: 'gray' }} source={{ uri: baseURL + item.imgs }}></Image>
                                                </View>
                                            })}
                                        </View>
                                        :
                                        <></>
                                }
                            </View>
                        </View>
                    })
                    :
                    <Text>暂时还没有评论哦</Text>
            }
        </ScrollView>
    )
}

export default Evaluation